<template>
    <div class="addressaa">
        <v-navbar></v-navbar>
        <div class="address_container">

            <div class="address_list" v-for="(v,i) in addressList" :key="i">
                <div class="address_list_left">
                    <div class="address_select" :class="{'address_selected': v.select}" @click="e_editDefault(i, v.addressId)"></div>
                </div>
                <div class="address_list_right">
                    <div class="address_list_top">
                        <div class="address_username">
                            <span>收货人：</span>
                            <span v-text="v.consignee" />
                        </div>
                        <div class="address_edit">
                            <span v-text="v.phone" />
                            <div class="edit_icon" @click="e_editAddress(v.addressId)"></div>
                        </div>
                    </div>
                    <div class="address_list_bottom">
                        <span>收货地址：</span>
                        <span v-text="`${v.province}${v.city}${v.area}${v.detailedAddress}`" />
                        <span class="defaultAddress" v-if="v.isDefault">默认地址</span>
                    </div>
                </div>
            </div>

        </div>
        <Modal v-model="modal1" title="修改默认地址" @on-cancel="cancel">
            <p>确定修改默认地址</p>
        </Modal>
        <div class="select-btn" @click="_submit">
            <v-button :text="text"></v-button>
        </div>
    </div>
</template>

<script>
import navbar from '@c/navbar/navbar'
import Button from '@c/button/button'
import { mapState, mapMutations } from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

export default {
	name: 'selectAddress',
	data() {
		return {
			modal1: false,
			addressList: [],
			addressID: '',
            addressInfo: {},
			text: '选择',
			id: '',
			select: [],
		}
	},
	components: {
		'v-navbar': navbar,
		'v-button': Button,
	},
	computed: {
		...mapState(['wtitle', 'rback']),
	},
	methods: {
		...mapMutations(['WTITLE', 'RBACK']),
		// 获取个人收货地址
		getAddress() {
			let getData = {
				userId: localStorage.getItem('userId'),
			}
			this.$store.state.loadding = true
			tokenPost(tokenLink.address.getAddress, getData).then(re => {
				this.$store.state.loadding = false
				if (re.status == 0) {
					re.data.forEach(item => {
						if(item.isDefault) {
							item['select'] = 1
							this.id = item.addressId
						} else {
							item['select'] = 0
						}
					})
					this.addressList = re.data
				}
			})
		},
		// 设置默认收货地址
		e_editDefault(index, id) {
			console.log('555')
			this.addressList.forEach(item => {
				item.select = 0
			})
			this.addressList[index].select = 1
			this.id = id
		},
		cancel() {
			this.$Message.success('取消修改')
		},
		// 跳转修改收货地址
		e_editAddress(i) {
			this.$router.push({
				path: 'addAddress',
				name: 'addAddress',
				params: {
					addressId: i,
				},
			})
		},
		// 提交地址
		_submit() {
			let SAddress = {
				addressId: this.id,
				goodsAuctionId: this.$route.query.id
			}
			tokenPost(tokenLink.address.selectAddress, SAddress).then(re => {
				console.log(re)
				if (re == "ok") {
					this.$router.push({
						path: '/dealDetail',
						name: 'DealDetail',
						query: {
							type: 0,
							id: this.$route.query.id,
						},
					})
				} else {
					
				}
			})
		}
	},
	created() {
		this.WTITLE('选择收货地址')
		this.RBACK(true)
		this.$Message.success('恭喜你抢拍成功,请先设置收货地址!')
	},
	mounted() {
		this.getAddress()
	},
	watch: {
		'select'() {
			return this.select
		}
	}
}
</script>